{extend name="public/base"}

{block name="x-body"}
<style>
    .layui-form-item .layui-form-label {
        width: 220px;
    }

    .layui-form-item .layui-input-inline {
        width: 225px
    }

    .layui-form .layui-table {
        width: 70%;
    }

    .layui-form .layui-table th,td {
        text-align: center;
    }

    .layui-form .layui-table td input {
        text-align: center;
        padding-left: 0;
    }

    .layui-form .layui-table .layui-form-label {
        width: 137px;
    }

    .layui-form .layui-table .layui-form-item {
        margin-bottom: 0;
    }
</style>
    <div class="x-body">
        <form class="layui-form">
            {if $id}
            <input type="hidden" name="id" value="{$id}">
            {/if}

            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>模板名称
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="name" name="name"
                           autocomplete="off" class="layui-input" value="{$result.name}" required lay-verify="required">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span class="x-red">*</span>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>计价方式
                </label>
                <div class="layui-input-block">
                    <input type="radio" name="type" value="0" lay-filter="type" title="件数" {$result.type == 0 ? 'checked' : ''}>
                    <input type="radio" name="type" value="1" lay-filter="type" title="重量" {$result.type == 1 ? 'checked' : ''}>
                    <input type="radio" name="type" value="2" lay-filter="type" title="体积" {$result.type == 2 ? 'checked' : ''}>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>是否启用默认配送配置
                </label>
                <div class="layui-input-block">
                    <input type="radio" name="is_enable_default" lay-filter="is_enable_default" value="1" title="启用" {$result.is_enable_default == 1 ? 'checked' : ''}>
                    <input type="radio" name="is_enable_default" lay-filter="is_enable_default" value="0" title="禁用" {$result.is_enable_default == 0 ? 'checked' : ''}>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>配送区域
                </label>
                <table class="layui-table">
                    <thead>
                        <tr>
                            <th>配送区域</th>
                            <th width="150" class="first">首{if $result.type == 0}件{elseif $result.type == 1}重{elseif $result.type == 2}体积{/if}</th>
                            <th width="150">运费</th>
                            <th width="150" class="continued">续{if $result.type == 0}件{elseif $result.type == 1}重{elseif $result.type == 2}体积{/if}</th>
                            <th width="150">运费</th>
                            <th width="50">操作</th>
                        </tr>
                    </thead>

                    <tbody class="box">
                        <tr>
                            <td colspan="6">
                                <div class="layui-form-item" id="x-city">
                                    <label class="layui-form-label">新增自定义区域</label>
                                    <div class="layui-input-inline">
                                        <select name="province" lay-filter="province">
                                            <option value="">请选择省</option>
                                        </select>
                                    </div>
                                    <div class="layui-input-inline">
                                        <select name="city" lay-filter="city">
                                            <option value="">请选择市</option>
                                        </select>
                                    </div>
                                    <div class="layui-input-inline">
                                        <select name="district" lay-filter="area">
                                            <option value="">请选择县/区</option>
                                        </select>
                                    </div>
                                    <div class="layui-input-inline" style="text-align: left; width: 80px;">
                                        <button  class="layui-btn" lay-filter="address_add" lay-submit="">新增</button>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        {if $result.is_enable_default == 0 }
                            <tr class="show" style="display: none;">
                                <td class="default_region">
                                    中国
                                    <input type="hidden" name="default[region]" value="中国">
                                    <input type="hidden" name="default[is_default]" value="1">
                                </td>
                                <td>
                                    <input type="text" name="default[first_unit]" class="layui-input" value="0">
                                </td>
                                <td>
                                    <input type="text" name="default[first_money]" class="layui-input" value="0">
                                </td>
                                <td>
                                    <input type="text" name="default[continue_unit]" class="layui-input" value="0">
                                </td>
                                <td>
                                    <input type="text" name="default[continue_money]" class="layui-input" value="0">
                                </td>
                                <td>
                                    <button class="layui-btn-primary layui-btn layui-btn-xs" disabled >默认配置</button>
                                </td>
                            </tr>
                        {/if}

                        {volist name="result.config" id="v"}
                            {if $v.is_default == 1}
                                <tr class="show">
                                    <td class="default_region">
                                        {$v.region}
                                        <input type="hidden" name="default[region]" value="{$v.region}">
                                        <input type="hidden" name="default[is_default]" value="1">
                                    </td>
                                    <td>
                                        <input type="text" name="default[first_unit]" class="layui-input" value="{$v.first_unit}">
                                    </td>
                                    <td>
                                        <input type="text" name="default[first_money]" class="layui-input" value="{$v.first_money}">
                                    </td>
                                    <td>
                                        <input type="text" name="default[continue_unit]" class="layui-input" value="{$v.continue_unit}">
                                    </td>
                                    <td>
                                        <input type="text" name="default[continue_money]" class="layui-input" value="{$v.continue_money}">
                                    </td>
                                    <td>
                                        <button class="layui-btn-primary layui-btn layui-btn-xs" disabled >默认配置</button>
                                    </td>
                                </tr>
                            {else /}
                                <tr>
                                    <td>
                                        {$v.region}
                                        <input type="hidden" name="region[]" value="{$v.region}">
                                    </td>
                                    <td>
                                        <input type="text" name="first_unit[]" class="layui-input" value="{$v.first_unit}">
                                    </td>
                                    <td>
                                        <input type="text" name="first_money[]" class="layui-input" value="{$v.first_money}">
                                    </td>
                                    <td>
                                        <input type="text" name="continue_unit[]" class="layui-input" value="{$v.continue_unit}">
                                    </td>
                                    <td>
                                        <input type="text" name="continue_money[]" class="layui-input" value="{$v.continue_money}">
                                    </td>
                                    <td>
                                        <button class="layui-btn-danger layui-btn layui-btn-xs"  onclick="removeTr(this)" href="javascript:;" ><i class="layui-icon">&#xe640;</i>删除</button>
                                    </td>
                                </tr>
                            {/if}
                        {/volist}
                    </tbody>
                </table>
            </div>

            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label">
                </label>
                <button  class="layui-btn" lay-filter="edit" lay-submit="" id="L_repass">
                    {$id ? '修改' : '增加'}
                </button>
            </div>
        </form>
    </div>
    <script>
        layui.use(['form','code', 'layer'], function(){
            form = layui.form;
            let layer = layui.layer;

            layui.code();

            $('#x-city').xcity();

            form.on('radio(type)', function(data){
                layer.confirm('切换计价方式后，当前模板的运费信息将被清空，确定继续吗？', {
                    btn: ['确认','取消'] //按钮
                }, function(index){
                    $(".box tr:gt(1)").html('');

                    $('.show input').val(0);

                    layer.close(index);
                });

                let continued = '', first = '';
                if(data.value == 0){
                    first = '首件';
                    continued = '续件';
                }else if(data.value == 1){
                    first = '首重';
                    continued = '续重';
                }else if(data.value == 2){
                    first = '首体积';
                    continued = '续体积';
                }

                $(".first").html(first);
                $(".continued").html(continued);
            });

            form.on('radio(is_enable_default)', function(data){
                if(data.value == 0){
                    $('.show').css('display', 'none');
                }else{
                    $('.show').css('display', 'table-row');
                    $('.default_region').append('<input type="hidden" name="default_region" value="中国">');
                }
            });

            form.on('submit(address_add)', function(data){
                let address = data.field.province + ' ' + data.field.city + ' ' + data.field.district;

                let label = '<tr><td>'+ address +'<input type="hidden" name="region[]" value="'+ address +'"></td><td><input type="text" name="first_unit[]" class="layui-input" value="0"></td>';
                label += '<td><input type="text" name="first_money[]" class="layui-input" value="0"></td>';
                label += '<td><input type="text" name="continue_unit[]" class="layui-input" value="0"></td>';
                label += '<td><input type="text" name="continue_money[]" class="layui-input" value="0"></td>';
                label += '<td><button class="layui-btn-danger layui-btn layui-btn-xs"  onclick="removeTr(this)" href="javascript:;" ><i class="layui-icon">&#xe640;</i>删除</button></td></tr>';

                $(".box").append(label);
                return false;
            });
        });

        formData('{:url("MallConfig/freightTemplate_form")}', 'edit', function (){
            window.parent.location.reload();

            var index = parent.layer.getFrameIndex(window.name);
            //关闭当前frame
            parent.layer.close(index);
        }, false);

        function removeTr(obj){
            $(obj).parents('tr').remove();
        }
    </script>
{/block}